import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Modal, Tooltip, Icon, message } from 'antd'


const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        ID: item.ID,
      }
      if (data.newPassword !== data.confirmNewPassword) {
        message.error('newPassword should equal to confirmNewPassword')
      } else {
        //onOk(data)
      }
    })
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="OldPassword" hasFeedback {...formItemLayout}>
          {getFieldDecorator('oldPassword', {
            initialValue: item.oldPassword,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input  type = 'password'/>)}
        </FormItem>
        <FormItem label={(<span>NewPassword&nbsp;<Tooltip title="The length of the password should more than 8 and not all the numbers ?"><Icon type="question-circle-o" /></Tooltip></span>)} hasFeedback {...formItemLayout}>
          {getFieldDecorator('newPassword', {
            initialValue: item.newPassword,
            rules: [
              { required: true, },
              { pattern: /(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{8,}/,
                message: 'The length of the password should more than 8 and not all the numbers' },
            ],
          })(<Input type = 'password' />)}
        </FormItem>
        <FormItem label={(<span>confirmNewPassword&nbsp;<Tooltip title="Repeat the newpassword"><Icon type="question-circle-o" /></Tooltip></span>)} hasFeedback {...formItemLayout}>
          {getFieldDecorator('confirmNewPassword', {
            initialValue: '',
            rules: [
              {
                required: true,
                max: 255,
              },
            ],
          })(<Input  type = 'password'/>)}
        </FormItem>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
